<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>登&nbsp;录</title>
<link rel="stylesheet" type="text/css" href="css/login/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/login/demo.css" />
<% var root = request.contextPath; %>
<!-- jquery -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="ui/validateform/Validform_v5.3.2_min.js"></script>
<!-- bootstarp -->

<script type="text/javascript" src="ui/bootstarp/js/bootstrap.min.js"></script>
<style type="text/css">
	#wrap{
		z-index: 2;
		position: relative;
		text-align: center;
		margin:0,auto;
		color: #fff;
	}
	#title{
		text-align: left;
		float: left;
		padding-left: 20px;
		margin-top: 10px;
		font-size: 24px;
		font-family: '方正姚体';
	}
	#form{
		border: 1px solid #d8d8d8;
		width: 480px;
		height: 350px;
		border-radius:7px;
		position:absolute;
		opacity: 0.95;
		filter: alpha(opacity=95);
		background: #384D3A;
	}
	.form_header{
		height: 70px;
		background-color: #68c8c8;
		border-radius:7px 7px 0 0;
	}
	.form_content{
		padding-top: 40px;
	}
	.form_content div{
		padding-top: 20px;
	}
	#error_div{
		height:30px;
		font-size：12px;
		padding:0;
		margin-top: 20px;
		display: none;
	}
	#error{
		font-size:14px;
		color:red;
	}
	.form_content div input[type=text],.form_content div input[type=password]{
		height:30px;
		line-height: 30px;
		width: 200px;
		font-size:13px;
		border: 1px solid #d8d8d8;
		background-color: #fff;
		margin-left: 10px;
	}
	.form_content div input[type=button]{
		font-size:14px;
		width:60px;
		height: 30px;
		padding-left: 25
	}
	#login_button{
		background-color: #ED9C28;
		border: 0;
		color: #fff;
		width: 80px;
		margin-left: 10px;
	}
	#reset_button{
		background-color: #221f34;
		border: 0;
		color: #fff;
		width: 80px;
	}
	
</style>
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/login/component.css" />
<script src="js/login/html5.js"></script>
<script type="text/javascript">
	$(function(){
		var width = $(document).width();
		var height = $(document).height();
		var margin_width = (width-480)/2;
		var margin_top = (height-350)/2;
		$("#form").css("margin-left",margin_width);
		$("#form").css("margin-top",margin_top);
	})
</script>

</head>
<body>
<div class="container demo-2"  style="z-index: 1;position: absolute;">
	<div class="content">
		<div id="large-header" class="large-header" >
			<canvas id="demo-canvas"></canvas>
		</div>
	</div>
</div>
<!-- 登录窗口 -->
<div  id="wrap" >
	<div id="form">
		<form action="" id="form_submit" >
			<div class="form_header" >
				<span id="title">smart system</span>
			</div>
			<div class="form_content">
				<div >
					<span><label>登录名</label></span>
					<input type="text"  name="username" onblur="blur()"  >
				</div>
				
				<div>
					<span><label>&nbsp;密&nbsp;码&nbsp;</label></span>
					<input type="password"  name="password" onblur="blur()">
				</div>
				
				<div >
					<input type="button" value="重&nbsp;置" id="reset_button" onclick="reset()">
					<input type="button" value="登&nbsp;录" id="login_button" onclick="login()">
					
				</div>
				<div id="error_div"><label id="error"> </label></div>
			</div>
			
		</form>
	</div>
</div>
<script src="js/login/rAF.js"></script>
<script src="js/login/demo-2.js"></script>
<script type="text/javascript">
$(function(){
	document.onkeydown = function(e){  
	    var ev = document.all ? window.event : e;
	    if(ev.keyCode==13) {
	    	login();
	    }
	  }
})

function reset(){
		$("input[name=username]").val();
		$("input[name=password]").val();
	}

function login(){
	$.ajax({
		type:"post",
		data:$("#form_submit").serializeArray(),
		dataType: "json",
		url: '${root}/login',
		async:false,
		success:function(data){
			if(data.status==1){
				location.href = "${root}/index";
			}else{
				$("#error_div").css("display","block");
				$("#error").text("提示：登录名或者密码错误");
			}
		}
	});
}

function blur(){
	$("#error_div").attr("disploy","none");
	$("#error").text("");
}


</script>
</body>
</html>